<template>
  <div class="common">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="myform">
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="width100" @click="loginTodo">立即登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { signin } from "@/api";
export default {
  data() {
    return {
      form: {
        mobile: "13412341234",
      },
      rules: {
        // 表单校验
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var mobileReg = /^1(3|5|6|7|9|8)\d{9}$/;
              if (mobileReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号码"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var passReg = /^[A-Za-z0-9]{4,12}$/;
              if (value.length < 4) {
                callback(new Error("密码长度至少4位"));
              } else if (value.length > 12) {
                callback(new Error("密码长度最多12位"));
              } else if (!passReg.test(value)) {
                callback(new Error("请输入正确的密码"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    loginTodo() {
      console.log("dfssfsf");
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form + "111");
          signin(this.form)
            .then((res) => {
              if (res.type) {
                sessionStorage.setItem("token", res.token);
                sessionStorage.setItem("mobile", this.form.mobile);
                this.$router.push({ name: "index" });
                console.log(111);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.myform {
  padding-right: 50px;
  padding-top: 20px;
}
.width100 {
  width: 100%;
}
</style>